<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>品牌中心</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 900px; margin: 20px auto; }
    h1 { color: #6a4c93; }
    .brand-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }
    .brand {
      width: 150px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 12px;
      transition: box-shadow 0.3s ease;
    }
    .brand:hover {
      box-shadow: 0 0 12px rgba(106, 76, 147, 0.7);
    }
    .brand img {
      width: 100px;
      height: 60px;
      object-fit: contain;
      margin-bottom: 8px;
    }
    .brand-name {
      font-weight: bold;
      font-size: 16px;
      color: #6a4c93;
    }
    a.back-link {
      display: inline-block;
      margin-top: 20px;
      text-decoration: none;
      color: #6a4c93;
      border: 1px solid #6a4c93;
      padding: 6px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
    a.back-link:hover {
      background-color: #6a4c93;
      color: white;
    }
  </style>
</head>
<body>
<h1>测试静态数据展示</h1>
<p>汇聚知名品牌，品质保障。</p>
<div class="brand-list">
  <div class="brand">
    <img src="https://via.placeholder.com/100x60?text=品牌A" alt="品牌A" />
    <div class="brand-name">品牌A</div>
  </div>
  <div class="brand">
    <img src="https://via.placeholder.com/100x60?text=品牌B" alt="品牌B" />
    <div class="brand-name">品牌B</div>
  </div>
  <div class="brand">
    <img src="https://via.placeholder.com/100x60?text=品牌C" alt="品牌C" />
    <div class="brand-name">品牌C</div>
  </div>
</div>
<a href="javascript:void(0)" class="back-link" @click="$router.go(-1)">← 返回上一步</a>

</body>
</html>
